<template>
  <div class="div-lim">
    <el-page-header>
      <template #breadcrumb>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ name: 'MyCeHome' }">
            首页
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'LimitsList' }"
            >权限管理</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'LimitsList' }"
            >权限列表</el-breadcrumb-item
          >
        </el-breadcrumb>
      </template>
      <template #content>
        <span class="text-large font-600 mr-3"> Title </span>
      </template>
    </el-page-header>

    <main class="lim-main">
      <table cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th></th>
            <th>权限名称</th>
            <th>路径</th>
            <th>权限等级</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for='(item,index) in limitsList' :key='item.id' >
            <td style="width: 50px;">{{index+1}}</td>
            <td>{{item.authName}}</td>
            <td>{{item.path}}</td>
            <td>
              <el-button v-if='item.level*1+1==1' type="primary" plain>{{item.level*1+1}}级</el-button>
              <el-button v-if='item.level*1+1==2' type="success" plain>{{item.level*1+1}}级</el-button>
              <el-button v-if='item.level*1+1==3' type="warning" plain>{{item.level*1+1}}级</el-button>

            </td>
          </tr>
        </tbody>
      </table>
    </main>
  </div>
</template>

<script setup>
import axios from "axios";
import VueCookies from "vue-cookies";
import { reactive, ref, onMounted } from "vue";
// 列表
let limitsList = ref([]);
onMounted(()=>{
const headers = {
    Authorization: VueCookies.get("token"),
  };
  axios.get('/api/rights/list',{headers}).then((res)=>{
    limitsList.value = res.data.data
    console.log(limitsList.value);
  })
})

</script>

<style scoped>
.div-lim {
  flex-grow: 1;
  height: auto;
  padding: 20px;
}
/*  */
.lim-main {
  flex-grow: 1;
  height: auto;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  position: relative;
}
/* 表格 */
tr,
td,
th {
  border: 1px solid;
  padding: 10px;
}
table {
  width: 100%;
  height: 50px;
  border: 1px solid;
}
thead {
  width: 100%;
  height: 50px;
  border: 1px solid;
}
</style>